<template>
	<view class="pageBox">
		<view class="networkBox">
			<view class="networkItem">
				<view class="value blue">
					{{networkInfo | screen('length')}}
				</view>
				<view class="key">
					配置
				</view>
			</view>
			<view class="b">
				<view></view>
			</view>
			<view class="networkItem">
				<view class="value g">
					{{networkInfo | screen('connected')}}
				</view>
				<view class="key">
					已连通
				</view>
			</view>
			<view class="b">
				<view></view>
			</view>
			<view class="networkItem">
				<view class="value r">
					{{networkInfo | screen('connected1')}}
				</view>
				<view class="key">
					未连通
				</view>
			</view>
		</view>
		<view class="networkInfo" v-for="(item,index) in networkInfo" :key="index">
			<view class="title_box">
				<view class="title">
					网卡:{{item.name}}<text>|</text>速率:{{item.speed}}M<text>|</text>IP:{{item.ip}}
				</view>
				<view class="text">
					共{{item.dialingInfo.length}}条线路
				</view>
			</view>
			<view class="header">
				<view class="num">序号</view>
				<view class="ip">IP地址/掩码/网关</view>
				<view class="result">配置结果</view>
			</view>
			<view class="body" v-for="(item1,index1) in item.dialingInfo" :key="item1.number">
				<view class="num">{{item1.number}}</view>
				<view class="ip">
					<view class="t">
						{{item1.ip}}
					</view>
					<view class="vlan">
						<view class="">
							vlan_id:{{item1.vlanId}}|掩码:{{item1.mask}}
						</view>
						<view class="">
							网关:{{item1.gateway}}
						</view>
					</view>
				</view>
				<view :class="item1.connected?'result g':'result r'">{{ item1.connected?'已连通':'未连通' }}</view>
			</view>
		</view>
		<view class="btns">
			<view class="btn">
				同步网卡信息
			</view>
			<view class="btn" @click="bind">
				开始配置
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceInfo: {},
				deviceConfig: {},
				deviceId: '',
				networkInfo: {}
			}
		},
		onLoad(option) {
			if (option.name) {
				uni.setNavigationBarTitle({
					title: option.name + '线路情况'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '线路情况'
				})
			}
			this.deviceId = option.deviceId
			this.getConfig()
		},
		filters: {
			screen(value, type) {
				if (type == 'length') {
					let num = 0
					for (var i = 0; i < value.length; i++) {
						num = num += value[i].dialingInfo.length
					}
					return num
				}
				if (type == 'connected' || type == 'connected1') {
					let num = 0
					for (var i = 0; i < value.length; i++) {
						for (var j = 0; j < value[i].dialingInfo.length; j++) {
							if (type == 'connected') {
								if (value[i].dialingInfo[j].connected) {
									num += 1
								}
							} else {
								if (!value[i].dialingInfo[j].connected) {
									num += 1
								}
							}

						}
					}
					return num
				}
			}
		},
		methods: {
			// 配置
			bind(){
				this.$fun.jump(`./addnetwork?deviceId=${this.deviceId}`)
			},
			async getConfig() {

				await this.$fun.ajax.post('pai/getDevice', {
					deviceId: this.deviceId
				}).then(res => {
					this.deviceInfo = res.data
				})
				this.$fun.ajax.post('pai/dialingInfo', {
					deviceId: this.deviceId
				}).then(res => {
					this.networkInfo = res.data
				})
				this.$fun.ajax.post('pai/getSubmit').then(res => {
					this.deviceConfig = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #EEEEEE;

		.pageBox {
			margin: 20rpx;

			.networkBox {
				background: #FFFFFF;
				display: flex;
				justify-content: space-between;
				padding: 40rpx;
				border-radius: 20rpx;

				.networkItem {
					width: 30%;
					text-align: center;

					.value {
						font-weight: bold;
						font-size: 40rpx;
					}

					.key {
						color: #999999;
					}

					.blue {
						color: rgb(46, 91, 255);
					}

					.r {
						color: rgb(250, 85, 85);
					}

					.g {
						color: rgb(46, 204, 113);
					}
				}

				.b {
					width: 5%;
					display: flex;
					align-items: center;

					view {
						height: 60%;
						width: 1px;
						background: #EEEEEE;
					}
				}
			}

			.networkInfo {
				margin-top: 40rpx;
				background: #FFFFFF;
				padding: 40rpx;
				border-radius: 20rpx;

				.title_box {
					display: flex;
					flex-direction: column;

					.title {
						font-size: 28rpx;

						text {
							color: #999999;
							margin: 0 10rpx;
						}
					}

					.text {
						font-size: 26rpx;
						color: #999999;
					}
				}

				.header {
					margin-top: 20rpx;
					display: flex;
					background: rgb(234, 238, 255);
					padding: 20rpx 10rpx;

					.num {
						width: 80rpx;
						font-size: 28rpx;
						text-align: center;
					}

					.ip {
						width: calc(100% - 230rpx);
						font-size: 28rpx;
					}

					.result {
						width: 120rpx;
						font-size: 28rpx;
						text-align: center;
					}
				}

				.body {
					display: flex;
					align-items: center;
					padding: 20rpx 10rpx;
					border-bottom: 1px solid rgb(234, 238, 255);
					;

					.num {
						width: 80rpx;
						font-size: 26rpx;
						text-align: center;
					}

					.ip {
						width: calc(100% - 230rpx);
						font-size: 24rpx;
						display: flex;
						flex-direction: column;

						.vlan {
							font-size: 20rpx;
							color: #999999;
						}
					}

					.result {
						width: 120rpx;
						font-size: 26rpx;
						text-align: center;
					}

					.g {
						color: rgb(46, 204, 113);
					}

					.r {
						color: rgb(250, 85, 85);
					}
				}
			}

			.btns {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 336rpx;
					height: 98rpx;
					background: rgb(240, 223, 215);
					border-radius: 12rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #1E84F1;
				}

				.btn:nth-child(2) {
					background: #1E84F1;
					color: #FFFFFF;
				}
			}
		}
	}
</style>